<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浮动元素后边的非浮动元素的行为</title>
  </head>
  <body>
    <div style="height: 200px; width: 200px">
      <span
        style="
          float: left;
          width: 150px;
          height: 150px;
          margin: 5px;
          padding: 5px;
          border: solid 1px red;
          background-color: Olive;
        "
        >浮动元素span</span
      >
    </div>
    <div style="height: 200px; width: 200px">
      <span
        style="
          width: 150px;
          height: 150px;
          margin: 5px;
          padding: 5px;
          border: solid 1px red;
          background-color: Olive;
        "
        >浮动元素span</span
      >
    </div>
    <!-- 例子2下部 -->
    <hr />
    <div
      style="
        width: 600px;
        height: 500px;
        border: solid 1px blue;
        background-color: yellow;
      "
    >
      <div
        style="
          float: left;
          width: 250px;
          height: 250px;
          border: solid 1px Aqua;
          background-color: gray;
          margin: 10px 0 0 10px;
        "
      >
        浮动DIV
      </div>
      <div style="background-color: red; border: solid 1px green; width: 300px; height: 150px;">
        跟在浮动元素后边的DIV
      </div>
      <span style="background-color: red; border: solid 1px green; margin: 0 0 0 -50px;">
        跟在浮动元素后边的span</span>
    </div>
    <hr />
    <!-- 例子3下部 -->
    <p>清除浮动来把外层的div撑开,在发生塌陷的父容器底部</p>
    <div style="border: 2px solid red">
      <div style="float: left; width: 80px; height: 80px; border: 1px solid blue">
        TEST DIV
      </div>
      <div style="clear: both"></div>
    </div>
    <!-- 清除浮动方式以及触发BFC -->
    <hr />
    
  </body>
</html>
